import { defineComponent, reactive, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import Text from "@/components/Text";
import { ILabelProps } from "@/components/Label/types";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ListView from "@/components/ListView";
import { useRequest } from "./request";
import { useRouter } from "vue-router";
import { getUserTypeValue, getUserInfoUrl } from "@/command/apiTool";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import { Divider } from "vant";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import LabelGroup from "@/components/LabelGroup";
import RoundImg from "@/components/RoundImg";
import phoneIcon from "@/assets/image/phone_icon.png";
import BrandInfo from "@/components/BrandInfo";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import IconText from "@/components/IconText";
import time from "@/assets/image/time.png";

export default defineComponent({
  name: "",
  setup() {
    const { myBrandInfo, confirmAccess, confirmRefuse, form, ApplyList } =
      useRequest();
    const router = useRouter();

    const render1 = () => {
      const labels: ILabelProps[] = [
        {
          name: "品牌",
          type: "yellow",
        },
      ];
      const textLables: ILabelProps[] = [
        {
          name: myBrandInfo.value.nz + "类别可使用",
          type: "blue",
        },
      ];
      return (
        <CardView title={""}>
          <div class="relative flex items-center pb-[20px]">
            <BrandInfo
              text={myBrandInfo.value.entityContent}
              desc={myBrandInfo.value.address}
              labels={labels}
              types={myBrandInfo.value.nz ? textLables : undefined}
              type={getUserTypeValue() == "dh" ? "edit" : "normal"}
              src={myBrandInfo.value.logo}
              title={myBrandInfo.value.entityName}
            />
            <div
              class="absolute right-[-10px] top-[10px] w-[42px] h-[24px] flex  items-center justify-center text-[10px] text-[#999999]"
              style={{
                borderRadius: "16px 0px 0px 16px ",
                backgroundColor: "#EBEBEB",
              }}
              onClick={() =>
                router.push(`/farmProductMy?id=${myBrandInfo.value.id}`)
              }
            >
              编辑
            </div>
          </div>
        </CardView>
      );
    };
    const renderItem = (e: any) => {
      const labels: ILabelProps[] = [
        {
          name: "结队小户",
          type: "tag",
        },
      ];
      const textLables: ILabelProps[] = [
        {
          name: e.majorName + "类别可使用",
          type: "blue",
        },
      ];
      const data = [
        {
          name: "需代购农资",
          value: e.productionName,
          width: "40%",
        },
        {
          name: "代购数量",
          value: e.quantity,
          width: "40%",
        },
      ];
      if (getUserTypeValue() == "dh") {
        const buttons: IButtonGroupViewData[] = [
          {
            text: "拒绝",
            type: "primary",
            plain: true,
            onClick: () => confirmRefuse(e),
          },
          {
            text: "同意申请",
            type: "primary",
            onClick: () => confirmAccess(e),
          },
        ];
        return (
          <div class="flex flex-col w-full">
            <RoundInfo src={e.headPath} title={e.applyName} data={data} />
            <GreyBlock class="mt-[12px]">
              <RowView class="justify-between flex-1">
                <RowView>
                  <TextView>主营业务: {e.flag}</TextView>
                </RowView>
                <RoundEdgeButtonGroup data={buttons} />
              </RowView>
            </GreyBlock>
            <Divider />
          </div>
        );
      } else {
        return (
          <div class="flex flex-col">
            <RoundInfo
              labels={labels}
              src={e.logoUrl}
              title={e.name}
              data={data}
              v-slots={{
                bottomLable: () => (
                  <LabelGroup data={textLables} class={"mt-[9px]"} />
                ),
              }}
            />
            <GreyBlock class="mt-[12px]">
              <RowView class="justify-between flex-1">
                <RowView>
                  <TextView>{e.address}</TextView>
                </RowView>
                <TextView class="text-[12px] flex">
                  <Text class="text-[#FE8923] mr-[4px]">{e.useNum}</Text>
                  <Text>人最近使用</Text>
                </TextView>
                <RoundImg src={phoneIcon} />
              </RowView>
            </GreyBlock>
            <Divider />
          </div>
        );
      }
    };
    const render2 = () => {
      const datas = ApplyList.value.map((e: any) => {
        return {
          title: e.name,
          src: e.path,
          text: e.content,
          id: e.id,
        };
      });
      const data: IFilterMenuChoose[] = [
        { type: "area", key: "countryCode" },
        { type: "agriculturalType", key: "type", title: "农资品类" },
        { type: "datePicker", key: "time" },
      ];
      return (
        <CardView title={"申请列表"}>
          <FilterMenuSearch choose={data} searchKey="title" v-model={form} />
          <ListView
            data={ApplyList.value}
            type="custom"
            renderItem={renderItem}
          />
        </CardView>
      );
    };
    const renderBody = () => {
      return (
        <div class="box-border ">
          <div class="p-[12px] m-child-top-20">{render1()}</div>
          {render2()}
        </div>
      );
    };
    return () => {
      return (
        <PageTitle
          title="代购申请列表"
          right={() => (
            <IconText
              url={time}
              text="历史记录"
              class="header-right"
              onClick={() => router.push("/behalfBuyRecord")}
            />
          )}
        >
          {renderBody()}
        </PageTitle>
      );
    };
  },
});
